<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15-属性和属性节点</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function(){
            /*            
            1、什么是属性?
            对象身上保存的变量就是属性

            2、如何操作属性？
            第一种方式：
            赋值：对象.属性名称 = 值；
            获取：对象.属性名称
            
            第二种方式：
            对象["属性名称"] = 值;
            对象["属性名称"];
            */

            // function Person() {
                
            // }

            // var p = new Person();
            // // p.name = "kode";
            // // console.log(p.name);
            // p["name"] = "zhangsan";
            // console.log(p["name"]);

            // 3、什么是属性节点？
            /*
            <span name = "it666"></span>
            在编写HTML代码时，在HTML标签中添加的属性就是属性节点
            在浏览器中找到span这个DOM元素之后，展开看到的都是属性
            在attributes属性中保持的所有内容都是属性节点
            */ 
            // 4、如何操作属性节点？
            /*
            操作属性节点：
            DOM元素.setAttribute("属性名称","值");
            获取属性节点：
            DOM元素.getAttribute("属性名称");
            */ 

            var span = document.getElementsByTagName("span")[0];
            span.setAttribute("name","kode");
            console.log(span.getAttribute("name"))

            // 5、属性和属性节点有什么区别？
            /*
            任何对象都有属性，但是只有DOM对象才有属性节点
            */ 

           
        });
    </script>
</head>
<body>
    <span name = "it666"></span>
    
</body>
</html>